Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Accessibility#9196 #1319

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Accessibility#9196 #1319

wants to merge 4 commits into from

Conversation

maitxn
Copy link
Contributor

@maitxn maitxn commented Oct 10, 2024 •
edited
Loading

What/Why

  • Screen reader does not announce the search result information as No results on providing invalid input

Changes

Add aria-live as polite to Box element

Add announce function to trigger screen reader announcing the No results message when there is no search result

Before

image

After

  • The screen reader announces the search result information as No results on providing invalid input

References

leobalter
leobalter reviewed Oct 11, 2024
View reviewed changes
src/components/search.js Outdated Show resolved Hide resolved
@maitxn maitxn self-assigned this Oct 15, 2024
@maitxn maitxn requested a review from leobalter October 15, 2024 20:08
leobalter
leobalter approved these changes Oct 18, 2024
View reviewed changes
Copy link

@leobalter leobalter left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried to use useEffect to resolve the first No result search but it doesn't seem to work this way. The issue is fixed as your suggested change but there is still one caveat failing on the first No result search

the code looks better and indeed the first No result is still ongoing but for Chromevox only.

Did you have a chance to try this with a different screenreader other than chromevox?

It works ok using VoiceOver (cmd+F5 on MacOS). I didn't test this on JAWS, NVDA, etc but I take the implementation seems correct (and Chromevox is the one failing).

@maitxn
Copy link
Contributor Author

maitxn commented Oct 18, 2024 •
edited
Loading

I tried to use useEffect to resolve the first No result search but it doesn't seem to work this way. The issue is fixed as your suggested change but there is still one caveat failing on the first No result search

the code looks better and indeed the first No result is still ongoing but for Chromevox only.

Did you have a chance to try this with a different screenreader other than chromevox?

It works ok using VoiceOver (cmd+F5 on MacOS). I didn't test this on JAWS, NVDA, etc but I take the implementation seems correct (and Chromevox is the one failing).

I have tested on NVDA and it shows the No results on the first try. It is also working ok using VoiceOver. Only chromevox is the one failing.

image

@maitxn
Copy link
Contributor Author

maitxn commented Oct 18, 2024

@wraithgar FYI this PR got approved from @leobalter. Can you please merge it to prod?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@leobalter leobalter leobalter approved these changes

@monishcm monishcm Awaiting requested review from monishcm monishcm is a code owner

@wraithgar wraithgar Awaiting requested review from wraithgar wraithgar is a code owner

Assignees

@maitxn maitxn

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@maitxn @leobalter